<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		
		<title>largePhotoBox plugin Example</title>
		
		<!-- jQuery largePhotoBox plugin files -->
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.largephotobox-0.1.0.js"></script>
		<link rel="stylesheet" type="text/css" href="css/jquery.largephotobox-0.1.0.css" media="screen" />
		
	    <!-- Enable jQuery largePhotoBox plugin -->
	    <script type="text/javascript">
		    $(document).ready(function() {
		        $('#gallery a').largePhotoBox();
		    });
	    </script>

		<!-- Page style -->
	   	<style type="text/css">
	   	    body {margin:0}
	   	    h2, p, #gallery {margin:15px}
			#gallery {
				background-color:#444;
				padding:10px;
				width:auto
			}
			#gallery ul {list-style:none}
			#gallery ul li {display:inline}
			#gallery ul img {
				border:5px solid #3E3E3E;
				border-width:5px
			}
			#gallery ul a {text-decoration:none}
			#gallery ul a:hover img {
				border:5px solid #FFF;
				border-width:5px;
				color:#FFF
			}
			#gallery ul a:hover {color:#FFF}
		</style>
	</head>
	<body>
		<h2 id="example">Example</h2>
		<p>Click in the image and see the <strong>jQuery largePhotoBox plugin</strong> in action.</p>
		<div id="gallery">
		    <ul>
		        <li>
		            <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').largePhotoBox();">
		                <img src="photos/thumb_image1.jpg" alt="">
		            </a>
		        </li>
		        <li>
		            <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').largePhotoBox();">
		                <img src="photos/thumb_image2.jpg" alt="">
		            </a>
		        </li>
		        <li>
		            <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').largePhotoBox();">
		                <img src="photos/thumb_image3.jpg" alt="">
		            </a>
		        </li>

		        <li>
		            <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').largePhotoBox();">
		                <img src="photos/thumb_image4.jpg" alt="">
		            </a>
		        </li>
		        <li>
		            <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').largePhotoBox();">
		                <img src="photos/thumb_image5.jpg" alt="">
		            </a>
		        </li>
		        <li>
		            <a href="photos/image6.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').largePhotoBox();">
		                <img src="photos/thumb_image6.jpg" alt="">
		            </a>
		        </li>
		        <li>
		            <a href="photos/image7.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').largePhotoBox();">
		                <img src="photos/thumb_image7.jpg" alt="">
		            </a>
		        </li>
		    </ul>
		</div>
	</body>
</html>
